<template>
    <div class="account">
        <el-card body-class="single-card" v-loading="loading">
            <CustomTable :class="{'opacity-0': isEmpty}"
                         :fetchList="getListApi"
                         @refresh="onTableRefresh">
                <el-table-column :label="$t('account.table.accountID')" prop="AccountID"></el-table-column>
                <el-table-column :label="$t('account.table.accountType')" prop="AccountType">
                    <template #default="scope">
                        {{ $t('account.type.' + scope.row.AccountType) }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('account.table.totalIncome')" prop="TotalIncome"></el-table-column>
                <el-table-column :label="$t('account.table.expiredTime')" prop="ExpiredTime"></el-table-column>
                <el-table-column :label="$t('common.status')" prop="Status">
                    <template #default="scope">
                        {{ $t('account.status.' + scope.row.Status) }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('common.action')" width="100">
                    <template #default="scope">
                        <router-link :to="{path:'./detail',query:{id:scope.row.AccountID}}">
                            {{ scope.row.Status ? $t('account.table.renewal') : $t('common.view') }}
                        </router-link>
                    </template>
                </el-table-column>
            </CustomTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import CustomTable from '@/components/table/table.vue'
import {getListApi} from '@/api/account'
import {useRouter} from 'vue-router'

const router = useRouter()
const loading = ref(true);
const isEmpty = ref(true);

const onTableRefresh = (data: any[], state: any) => {
    console.log('onTableRefresh', data, state)
    isEmpty.value = data.length === 0 && state.pagination.total === 0;
    if (isEmpty.value) {
        router.replace('./buy');
    } else {
        loading.value = false;
    }
}
</script>

<style lang="scss" scoped>

</style>
